<template>
	<view class="IdlePurchase">
		<u-sticky bgColor="#fff">
		    <u-tabs lineColor="#FEBF4E" @change="change" :list="buy_cate" keyName="name"></u-tabs>
		</u-sticky>
		  
		<scroll-view scroll-y="true" @scrolltolower="lower" class="list">
			<view class="item" v-for="item in list" @click="goto('/pages/IdlePurchaseDetail/IdlePurchaseDetail?id='+item.id)">
				<view class="header flex">
					<image v-if="item.user.avatar" :src="oss(item.user.avatar)" mode="aspectFill" class="avatar"></image>
					<image v-else src="../../static/logo.png" mode="" class="avatar"></image>
					<!-- <image :src="oss(item.images[0])" mode="" class="avatar"></image> -->
					<view class="info">
						<view class="name">{{item.user.nickname || '半柿会员'}}</view>
						<!-- <view class="name">{{item.name}}</view> -->
						<view class="time">{{item.createtime | date}} 发布</view>
					</view>
				</view>
				<view class="title">
					【求购】{{item.name}}
				</view>
				<!-- <div class="covers">
					<image v-for="(val,key) of item.images" :key="key" :src="oss(val)" class="cover" mode="aspectFill"></image>
				</div> -->
			</view>
			<view class="empty" v-if="list.length == 0 && finish">
				<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png">
				</u-empty>
			</view>
		</scroll-view>
		<image class="upload" @click="goto('pagesA/index/upload?type=1')" src="../../static/index/upload.png" mode=""></image>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [],
				page: 1,
				finish: false,
				buy_cate:[{id:0,name:'全部'}],
				buy_cate_id:''
			}
		},
		mounted() {
			this.getlist()
			this.getcate()
		},
		methods: {
			change(e){
				console.log(e)
				this.buy_cate_id = e.id
				this.page = 1
				this.list = []
				this.finish = false
				this.getlist()
			},
			getcate() {
				uni.$u.http.post('/buycate').then(res => {
					if (res.code == 1) {
						this.buy_cate = this.buy_cate.concat(res.data);
					}
				}).catch((res) => {
			
				})
			},
			lower() {
				this.page++
				this.getlist()
			},
			// 跳转商品详情
			godetail(item) {
				uni.$u.route({
					url: 'pagesA/index/index_detail',
					params: {
						id: item.id
					}
				})
			},
			getlist() {
				if (this.finish) {
					return
				}
			
				uni.$u.http.post('/buyhome', {
					page: this.page,
					cate_id:this.buy_cate_id
				}).then(res => {
					if (res.code == 1) {
						console.log(res)
						this.list = this.list.concat(res.data)
						if (res.data.length === 0) {
							this.finish = true
						}
			
					}
				}).catch((res) => {})
			
			
			
			},
		}
	}
</script>

<style lang="scss">
	.IdlePurchase {
		padding: 0 32rpx 30rpx;
		box-sizing: border-box;
		height: 100%;
		position: relative;
		.upload {
			width: 113rpx;
			height: 113rpx;
			position: fixed;
			right: 30rpx;
			bottom: 200rpx;
		}
		.list {
			height: 100%;
			overflow: hidden;
			.item {
				padding: 30rpx  0;
				&:not(:last-child) {
					border-bottom: 1rpx solid #eaeaea;
				}
				.header {
					display: flex;
					align-items: center;
					.avatar {
						width: 80rpx;
						height: 80rpx;
						background: #D8D8D8;
						margin-right: 20rpx;
						border-radius: 50%;
					}
					.info {
						flex: 1;
						.name {
							font-size: 30rpx;
							font-weight: 400;
							color: rgba(0,0,0,0.8);
						}
						.time {
							font-size: 24rpx;
							font-weight: 400;
							color: rgba(0,0,0,0.3);
						}
					}
				}
				.title {
					font-size: 32rpx;
					font-weight: 600;
					color: rgba(0,0,0,0.8);
					margin-top: 20rpx;
				}
				.covers{
					display: flex;
					align-items: center;
					padding: 20rpx 0;
					.cover{
						width: 210rpx;
						height: 160rpx;
						margin-right: 30rpx;
						margin-bottom: 30rpx;
					}
					.cover:nth-of-type(3n){
						margin-right: 0;
					}
				}
			}
		}
	}
</style>
